<template>
  <div class="joe_container">

    <div class="joe_main">

      <!-- 基础统计 -->
      <div class="joe_census__basic_copy">

        <div class="joe_census__basic-item">
          <section class="joe_aside__item author" style="width: 100%;">
            <img width="100%" height="120" class="image ls-is-cached lazyloaded"
                 src="@/assets/images/user-background-img.jpg"
                 alt="博主栏壁纸">
            <div class="user" style="padding-bottom: 0">
              <img width="75" height="75" class="avatar ls-is-cached lazyloaded"
                   :src="getImgView(personalHomeInfo.userAvatar)"
                   alt="博主头像">
<!--              <router-link class="link" v-if="username != personalHomeInfo.username" :to="/personalHome/+username" target="_self" rel="noopener noreferrer nofollow">-->
<!--                {{ personalHomeInfo.realname }}-->
<!--              </router-link>-->
              <span style="margin-bottom: 10px;  font-size: 16px;  font-weight: 500">
                {{ personalHomeInfo.realname }}
              </span>
              <p class="motto joe_motto">
                码龄 {{ personalHomeInfo.joinTime }}
              </p>
            </div>

<!--            <div class="count" style="border-bottom: none;">-->
<!--              <div class="item" title="累计文章数">-->
<!--                <span class="num">{{ personalHomeInfo.articleNum }}</span>-->
<!--                <span>文章数</span>-->
<!--              </div>-->
<!--              <div class="item" title="累计浏览量" style="border-right: 1px solid #ebeef5;">-->
<!--                <span class="num">{{ personalHomeInfo.collectNum }}</span>-->
<!--                <span>收藏量</span>-->
<!--              </div>-->
<!--              <div class="item" title="累计文章数" style="border-right: 1px solid #ebeef5;">-->
<!--                <span class="num">{{ personalHomeInfo.articleNum }}</span>-->
<!--                <span>文章数</span>-->
<!--              </div>-->
<!--              <div class="item" title="累计浏览量">-->
<!--                <span class="num">{{ personalHomeInfo.collectNum }}</span>-->
<!--                <span>收藏量</span>-->
<!--              </div>-->
<!--            </div>-->
          </section>

          <ul class="joe_header__slideout-count">
            <svg-icon icon-class="cake"/>
            <span> 于</span>
            <span class="user-general-info-key-word"> {{ personalHomeInfo.createTime }}</span>
            加入 <span class="user-general-info-key-word">June 12</span>
          </ul>
          <!--  左侧  -->
          <aside class="joe_aside" style="padding: 0;margin-left: 0;">
            <section class="joe_aside__item newreply" style="width: 100%;">
              <div class="joe_aside__item-title">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                  <path
                    d="M898.048 556.544L547.84 916.992c-43.008 44.032-112.64 44.032-155.648 0L119.808 636.416c-43.008-44.032-43.008-116.224 0-160.256L470.016 115.2c26.624-28.672 31.744-41.472 59.904-41.472h355.84c28.16 0 50.688 23.552 50.688 52.224v366.592c0 28.672-15.872 40.448-38.4 64zM158.72 596.48l272.384 280.576c21.504 22.016 56.32 22.016 77.824 0l38.4-39.936-349.696-361.472-39.424 40.448c-20.992 22.528-20.992 58.368.512 80.384zm727.04-444.416c0-14.336-11.264-26.112-25.6-26.112H555.008c-13.824 0-33.792 16.384-46.592 29.184l-271.36 280.576 349.696 360.96 272.384-280.576c13.824-14.336 26.624-35.328 26.624-49.664V152.064zM610.304 422.4c-42.496-43.52-42.496-114.688 0-158.208 42.496-44.032 111.104-44.032 153.6 0 42.496 43.52 42.496 114.688 0 158.208s-111.616 43.52-153.6 0zm115.2-118.784c-20.992-22.016-55.808-22.016-76.8 0s-20.992 57.344 0 79.36 55.808 22.016 76.8 0 20.992-57.344 0-79.36z"></path>
                </svg>
                <span class="text">标签云</span>
                <span class="line"></span>
              </div>
              <ul class="joe_header__slideout-count" style="padding: 12px 15px;">
                <div class="aside-common-box-bottom">
                  <div :class="isOpen ? 'aside-common-box-content aside-box-fold' : ''">
                    <ul>
                      <template v-for="item in lableData">
                        <li>
                          <a :href="'/articleLableList/'+item.id"
                             class="special-column-name"
                          >
                            <span>{{ item.value }}</span>
                          </a>
                          <div class="special-column-num"> {{ item.number }} 篇</div>
                        </li>
                      </template>
                    </ul>
                  </div>
                  <template v-if="lableData.length > 5">
                    <button v-if="isOpen" @click="showOpen(false)" class="aside-common-box-bottom-btn">
                      展开
                      <i class="el-icon-arrow-down"/>
                    </button>
                    <button v-else @click="showOpen(true)" class="aside-common-box-bottom-btn">
                      收起
                      <i class="el-icon-arrow-up"/>
                    </button>
                  </template>

                </div>
              </ul>
            </section>
          </aside>
        </div>

        <div class="joe_main" style="padding: 0">
          <!--  右侧  -->
          <div class="joe_index">
            <!-- 加载动画 -->
            <div class="joe_index__list" data-wow="fadeIn">
              <a-tabs default-active-key="2" @change="callbackTabs" style="padding: 3px 5px 10px 5px;">
                <a-tab-pane key="2" :tab="'文章 - ' + personalHomeInfo.articleNum">
                  <personal-home-list ref="personalHomeList"/>
                </a-tab-pane>
                <a-tab-pane key="3" :tab="'收藏 - ' + personalHomeInfo.collectNum">
                  <person-my-favorites-list ref="PersonMyFavoritesList"/>
                </a-tab-pane>
                <a-tab-pane key="4" :tab="'点赞 - ' + personalHomeInfo.likesNum">
                  <person-like-list ref="PersonLikeList"/>
                </a-tab-pane>
                <a-tab-pane key="5" tab="关注/订阅">
                  <person-follow-list ref="PersonFollowList"/>
                </a-tab-pane>
                <a-select
                  slot="tabBarExtraContent"
                  default-value="createTime"
                  @change="handleChange"
                  v-if="showSelect"
                >
                  <a-select-option value="createTime">
                    发布时间
                  </a-select-option>
                  <a-select-option value="viewsNum">
                    浏览量
                  </a-select-option>
                  <a-select-option value="likesNum">
                    点赞量
                  </a-select-option>
                  <a-select-option value="collectNum">
                    收藏量
                  </a-select-option>
                </a-select>
              </a-tabs>

            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
</template>

<script>

import CountTo from 'vue-count-to'
import {getAction, getFileAccessHttpUrl} from '@/api/manage'
import PersonalHomeList from './subTables/PersonalHomeList'
import PersonMyFavoritesList from './subTables/PersonMyFavoritesList'
import PersonLikeList from './subTables/PersonLikeList'
import PersonFollowList from './subTables/PersonFollowList'

export default {
  name: 'PersonalHome',
  components: {
    CountTo,
    PersonalHomeList,
    PersonMyFavoritesList,
    PersonLikeList,
    PersonFollowList
  },
  data() {
    return {
      username: this.$route.params.username,
      url: {
        initArticleSort: '/articleView/initArticleSort',
        initArticleLable: '/articleView/getLableStatistics',
        getPersonalHomeInfo: '/articleView/getPersonalHomeInfo'
      },
      personalHomeInfo: {},
      showSelect: true,
      isOpen: true,
      sortData: [],
      lableData: []
    }
  },
  created() {
    this.getPersonalHomeInfo()
    this.initArticleSort()
  },
  methods: {
    getPersonalHomeInfo() {
      getAction(this.url.getPersonalHomeInfo, {
        'username': this.username
      }).then(res => {
        if (res.success) {
          this.personalHomeInfo = res.result
        }
      })
    },
    handleChange(value) {
      this.$refs.personalHomeList.changeSelect(value)
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    callbackTabs(key) {
      if (key === '2') {
        this.showSelect = true
      } else {
        this.showSelect = false
      }
    },
    showOpen(flag) {
      this.isOpen = flag
    },
    // 初始化文章分类
    initArticleSort() {
      // getAction(this.url.initArticleSort, {}).then(res => {
      //   if (res.success) {
      //     this.sortData = res.result
      //   }
      // })
      getAction(this.url.initArticleLable, {
        'username': this.username
      }).then(res => {
        if (res.success) {
          this.lableData = res.result
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.aside-common-box-content.aside-box-fold {
  max-height: 224px;
  overflow: hidden;
}

.aside-common-box-bottom div ul {
  padding: 0;
  margin: 0;
}

.aside-common-box-bottom div ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.special-column-name {
  display: flex;
  align-items: center;
  color: #555666;
  font-size: 14px;
  line-height: 24px;
  flex: 1;
  overflow: hidden;
}

.special-column-name:hover {
  font-weight: 500;
  color: #409EFF;
}


.special-column-num {
  color: #999aaa;
  font-size: 14px;
  line-height: 16px;
  flex-shrink: 0;
  margin-left: 16px;
}

.aside-common-box-bottom-btn {
  width: 100%;
  background: #f8f8f8;
  height: 32px;
  color: #555666;
  font-size: 14px;
  outline: none;
  border: none;
  margin-top: 10px;
}

.user-general-info-key-word {
  color: #222226;
  max-width: calc(100% - 124px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


</style>
